<template>
  <div>
    <div>{{teacher}}</div>
    <button @click="addAttrByObj">新增属性</button>
    <button @click="removeAttrByObj">删除属性</button>
    <hr>
    <div>{{names}}</div>
    <button @click="operAry1">操作数组元素1</button>
    <button @click="clearAry">清空数组</button>
  </div>
  
</template>

<script>
import Vue from 'vue'
export default {
  data(){
    return{
       teacher:{
         name:'Giles',
         job:'teacher'
       },
       names:['Giles','Monica','Marray','Peter']
    }
  },
  methods:{
    addAttrByObj(){
      //1、this.$set(this.teacher,'age',38)
      //2、Vue.set(this.teacher,'age',38)
      //3、ES6的对象的扩展运算符
      // this.teacher={
      //   ...this.teacher,
      //   age:38
      // }
      //4、Object.assign()
      //this.teacher=Object.assign({},this.teacher,{age:38})
      //5、使用vue实例中的$forceUpdate()
      this.teacher.age=38
      this.$forceUpdate()
    },
    removeAttrByObj(){
      /*
      删除对象中的属性，实现自动变更检测的方式如下
      方式1：使用$forceUpdate()来实现
      delete this.teacher.job
      this.$forceUpdate()
      */
     //this.$delete(this.teacher,'job')
     Vue.delete(this.teacher,'job')
    },
    operAry1(){
      /*
      this.names[4]="Jack"
      this.$forceUpdate()
      */
     //this.$set(this.names,4,"Dollr")
     Vue.set(this.names,4,"Dollr")
    },
    clearAry(){
      //this.names.length=0
      //this.names=[]
      this.names.splice(0)
    }
  }
}
</script>

<style>

</style>